<template>
  <div class="detail">
    <div class="detail-head">
      <van-icon name="arrow-left" @click="back" />
      <h3>{{ detail.community }}</h3>
      <van-icon name="share-o" />
    </div>

    <div class="detail-main">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="(item, index) in detail.houseImg" :key="index">
          <img :src="'http://47.102.145.189:8009' + item" alt="" />
        </van-swipe-item>
      </van-swipe>

      <div class="detail-one">
        <h3>{{ detail.title }}</h3>
      </div>

      <div class="detail-two">
        <button v-for="(item, index) in detail.tags" :key="index">
          {{ item }}
        </button>
      </div>

      <div class="detail-three">
        <ul class="ull">
          <li>
            <p>{{ detail.price }}/月</p>
            <p>租金</p>
          </li>
          <li>
            <p>{{ detail.roomType }}</p>
            <p>房型</p>
          </li>
          <li>
            <p>{{ detail.size }}</p>
            <p>面积</p>
          </li>
        </ul>
      </div>

      <div class="detail-four">
        <ol class="ols">
          <li>
            <span>装修：</span>
            <span>精装</span>
          </li>
          <li>
            <span>朝向：</span>
            <span>南</span>
          </li>
          <li>
            <span>楼层：</span>
            <span>2</span>
          </li>
          <li>
            <span>类型：</span>
            <span>普通住宅</span>
          </li>
        </ol>
      </div>

      <div class="detail-five">
        <h3>小区：{{ detail.community }}</h3>
      </div>

      <div class="detail-six">
        <div id="container"></div>
      </div>

      <div class="detail-seven">
        <h3>房屋配套</h3>
      </div>

      <div class="detail-eight">
        <ul class="uls">
          <li
            v-for="(item, index) in list"
            :key="index"
            @click="btnactive(index, item.value)"
            ref="actioe"
          >
            <i :class="`iconfont icon-` + item.i"></i>
            <span>{{ item.title }}</span>
          </li>
        </ul>
      </div>

      <div class="detail-nine">
        <h3>房屋概况</h3>
      </div>
      <div class="detail_ten">
        <dl>
          <dt>
            <img
              src="https://api-haoke-web.itheima.net/img/avatar.png"
              alt=""
            />
          </dt>
          <dd>
            <p>王女士</p>
            <p><van-icon name="passed" />已认证房主</p>
          </dd>
          <dd>
            <span>发消息</span>
          </dd>
        </dl>
        <div class="detail_ten_one">
          <p>暂无房屋描述</p>
        </div>
      </div>

      <div class="detail_like">
        <h3>猜你喜欢</h3>
      </div>

      <div class="home-six">
        <div class="home-six-one" v-for="(v, i) in latestnews" :key="i">
          <dl>
            <dt>
              <img :src="'http://47.102.145.189:8009' + v.imgSrc" alt="" />
            </dt>
            <dd>
              <p>{{ v.title }}</p>
            </dd>
          </dl>
        </div>
      </div>
    </div>

    <div class="detail-footer">
      <span ref="shoucang" @click="btn" class="sc"
        ><van-icon name="star-o" />收藏</span
      >
      <span>在线咨询</span>
      <span>电话预约</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detail: [],
      latestnews: [],

      list: [
        {
          i: "kongtiao",
          title: "空调",
        },
        {
          i: "tianranqi-01",
          title: "天然气",
        },
        {
          i: "bingxiang",
          title: "冰箱",
        },

        {
          i: "dianshi",
          title: "电视",
        },
        {
          i: "haofangtuo400iconfont2reshuiqi",
          title: "热水器",
        },
        {
          i: "kuandai",
          title: "宽带",
        },
      ],
    };
  },

  methods: {
    back() {
      history.back(-1);
    },

    btn() {
      this.$refs.shoucang.classList.toggle("active");
    },

    latest() {
      this.$http.get("/home/news").then((res) => {
        console.log(res);
        this.latestnews = res.data.body;
        console.log(this.latestnews);
      });
    },
    //点击高亮
    btnactive(index, value) {
      this.$refs.actioe[index].classList.toggle("active");
    },
  },

  mounted() {
    let { BMapGL } = window;
    this.$http.get(`/houses/${this.$route.query.id}`).then((res) => {
      console.log(res);
      this.detail = res.data.body;
      console.log(this.detail);

      this.list.forEach((v) => {
        res.data.body.supporting.map((item) => {
          if (v.title === item.label) {
            Object.assign(v, item);
            return v;
          }
        });
      });

      var map = new BMapGL.Map("container"); // 创建地图实例
      var point = new BMapGL.Point(
        res.data.body.coord.longitude,
        res.data.body.coord.latitude
      ); // 创建点坐标
      map.centerAndZoom(point, 18);
      map.enableScrollWheelZoom(true);

      var opts = {
        position: new BMapGL.Point(
          res.data.body.coord.longitude,
          res.data.body.coord.latitude
        ), // 指定文本标注所在的地理位置
        offset: new BMapGL.Size(30, -30), // 设置文本偏移量
      };
      // 创建文本标注对象
      var label = new BMapGL.Label(res.data.body.community, opts);
      // 自定义文本标注样式
      label.setStyle({
        color: "white",
        borderRadius: "5px",
        background: "red",
        padding: "10px",
        fontSize: "16px",
        width: "auto",
        height: "50px",
        lineHeight: "30px",
        fontFamily: "微软雅黑",
      });
      map.addOverlay(label);
    });
  },

  created() {
    this.latest();
  },
};
</script>

<style>
.detail {
  width: 100%;
  height: 100%;
  background: #e6e6e6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.detail-head {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  background: #e6e6e6;
}
.detail-head h3 {
  font-size: 16px;
}
.van-swipe {
  width: 100%;
  height: 200px;
}
.van-swipe img {
  width: 100%;
  height: 100%;
}
.detail-main {
  flex: 1;
  overflow-y: scroll;
}
.detail-one {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font-size: 16px;
  line-height: 40px;
  background: #fff;
}
.detail-two {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  border-bottom: 1px solid #ccc;
  background: #fff;
}
.detail-three {
  width: 100%;
  height: 70px;
  border-bottom: 1px solid #ccc;
  padding: 0 10px;
  background: #fff;
}
.detail-three .ull {
  width: 100%;
  height: 70px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
}
.detail-three .ull li {
  width: calc(100% / 3);
  font-size: 16px;
}
.detail-three .ull li p:nth-child(1) {
  color: orangered;
}
.detail-three .ull li p:nth-child(2) {
  color: #ccc;
}
.detail-four {
  width: 100%;
  height: 70px;
  border-bottom: 1px solid #ccc;
  padding: 0 10px;
  background: #fff;
}
.detail-four .ols {
  width: 100%;
  height: 70px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
}
.detail-four .ols li {
  width: calc(100% / 2);
  font-size: 16px;
}
.detail-five {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 12px;
  background: #fff;
}
#container {
  width: 100%;
  height: 200px;
}
.detail-two button {
  background: skyblue;
  color: darkturquoise;
  border: none;
  border-radius: 4px;
  padding: 2px 5px;
}
.detail-six {
  width: 100%;
  height: 200px;
  background: #fff;
}
.detail-seven {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  background: #fff;
}
.detail-eight {
  width: 100%;
  height: 150px;
  background: #fff;
}
.detail-eight .uls {
  width: 100%;
  height: 150px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.detail-eight .uls li {
  display: flex;
  flex-direction: column;
  height: 50px;
  width: calc(100% / 5);
  font-size: 16px;
  line-height: 30px;
}
.detail-footer {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #e6e6e6;
  border-top: 1px solid #ccc;
  background: #fff;
  color: #ccc;
}
.detail-footer span {
  padding: 10px 30px;
  border-right: 1px solid #e6e6e6;
}
.detail-footer span:nth-child(3) {
  background: chartreuse;
  color: #fff;
  border: none;
}
.sc {
  color: #ccc;
}
.active {
  color: orangered;
}
.detail-nine {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  background: #fff;
  margin-top: 10px;
}
.detail_ten {
  width: 100%;
  height: 110px;
  background: #fff;
}
.detail_ten dl {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.detail_ten dl dt {
  width: 20%;
  height: 60px;
}
.detail_ten dl dt img {
  width: 100%;
  height: 100%;
}
.detail_ten dl dd {
  font-size: 16px;
  padding: 0 10px;
}
.detail_ten dl dd:nth-child(3) {
  padding-left: 130px;
}
.detail_ten dl dd:nth-child(3) span {
  border: 1px solid #21b97a;
  color: #21b97a;
  padding: 3px;
}
.detail_ten_one {
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  font-size: 16px;
}
.detail_like {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  background: #fff;
  margin-top: 10px;
}
.home-six {
  width: 100%;
  height: 360px;
  background: #fff;
}
.home-six-one {
  width: 100%;
  height: 120px;
  padding: 0 10px;
  border-bottom: 1px solid #e6e6e6;
}
.home-six-one dl {
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home-six-one dl dt {
  width: 120px;
  height: 90px;
}
.home-six-one dl dt img {
  width: 100%;
  height: 100%;
}
.home-six-one dl dd {
  width: 345px;
  height: 90px;
  padding-left: 20px;
  font-size: 16px;
}
.home-six-one dl dd p:nth-child(2) {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
</style>